<template>
  <div class="v-editor-view-customization g-jc-sb">
    <el-input
      v-model="inputvalue"
      class="g-one-line"
      type="textarea"
      :rows="1"
      :disabled="disabled"
    ></el-input>
    <div
      v-if="selected"
      class="g-pd-r-4 img-btn"
    >
      <img
        src="statics/icons/app/iconmore.png"
        class="g-pointer"
        @click="handleClick"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { modelService } from "@/modules/model/service";
import { computed, inject, Ref } from "vue";
import { propertyUtil } from "../../PropertyUtil";
import { PropertyRow } from "../../types";
import { BusEvent } from "@/constants/Enums";
import { diagramCustomizationWindow } from "@/modules/model/modals/diagramCustomization";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 单行输入框
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();
// let inputvalue = ref<string>(props.row.value as string);

const disabled = computed(() => {
  // return props.row.readonly || isModelDisabled?.value;
  return true;
});

const inputvalue = computed(() => {
  return props.row.value ? "查看配置详情" : "";
});

/* watch(() => props.row.value, (newVal) => {
  inputvalue.value = newVal as string;
}); */

const handleClick = () => {
  diagramCustomizationWindow
    .popup({
      projectId: app.activeProject!.config.id,
      modelId: props.row.modelId,
      rootId: app.activeProject!.config.rootId,
      isModelDisabled: isModelDisabled.value,
      row: JSON.stringify(props.row)
    })
    .then(async res => {
      if (!res.success) return;
      const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.config.id);
      dto.value = res.diagramConfig;
      const result = await modelService.updateModelProperty(dto);

      if (result.code === 1000) {
        app.$bus.emit(BusEvent.REFRESH_PROPERTY, props.row.modelId, props.row.key);
      }
      diagramCustomizationWindow.done();
    });
};
</script>
<style lang="scss" scoped>
.v-editor-view-customization {
  height: auto;
  > .img-btn {
    display: flex;
    align-items: center;
  }
  .el-input .el-input__inner {
    padding-right: 0px;
  }

  :deep(.el-textarea__inner) {
    background-color: initial;
    resize: none;
    overflow: auto;
    text-overflow: ellipsis;
  }
}
</style>
